<template>
	<div class="com-container">
		<div class="title" :style="comStyle" ref='title'>
			<span >{{'▎ '+showTitle}}</span>
			<span :style="comStyle" class="iconfont title-icon" @click = 'isshow =!isshow'> &#xe6eb;</span>
			<div class="select-con" v-show="isshow" :style="marginStyle">
				<div @click="handleSelect(item.key)" class="select-item" v-for ='item in selectTypes' :key = 'item.key'>
					{{item.text}}
				</div>
			</div>
		</div>
		<div class="com-chart" ref='trend_ref'></div>
	</div>
</template>

<script>
	import { getThemeValue } from '@/utils/theme_utils.js'
	export default {
		data() {
			return {
				//实例对象
				chartInstance:null,
				// 服务器返回的数据
				resData: null,
				//可选性是否显示
				isshow:false,
				//显示数据类型,默认地区类型
				choiceType:'map',
				suitableWeight: null
			}
		},
		computed:{
			selectTypes(){
				if(this.resData){
					return this.resData.type.filter(item=>{
						return item.key !== this.choiceType;
					});
			  } 
				else{
				  return [];
				}
			},
			showTitle(){
				if(this.resData){
					return this.resData[this.choiceType].title;
				} 
				else{
				  return '';
				}
			},
			comStyle(){
				return {
					fontSize: this.suitableWeight * 4+'px' ,
					color: getThemeValue(this.theme).titleColor
				}
			},
			marginStyle () {
				return {
					marginLeft: this.suitableWeight * 3.5+ 'px'
				}
			},
			theme(){
				 return this.$store.state.theme;
			}
		},
		watch:{
			theme(){
				//销毁当前图表
				this.chartInstance.dispose();
				//重新以最新主题初始化图表
				this.initChart();
				// //切换标题的颜色
				// if(this.$store.state.theme ==='chalk')
				// {
				// 	this.$refs.title.style.color ='#fff' ;
				// } else{
				// 	this.$refs.title.style.color ='#333'
				// };
				//完成适配
				this.screenAdapter();
				//更新图表展示
				this.updataChart();			
			}
		},
		created(){
			//组件创建完成后进行回调函数的注册
			this.$socket.registerCallBack('trendData',this.getData)		
		},
		mounted() {
			this.initChart();
			//this.getData();
			//发送数据给服务器需要数据
			this.$socket.send({
				action: 'getData',
				socketType: 'trendData',
				chartName: 'trend',
				value: ''
			})
			this.screenAdapter();
			window.addEventListener("resize", this.screenAdapter);
		},
		destroyed() {
			window.removeEventListener("resize", this.screenAdapter);
		  //组件销毁时进行回调函数的取消
			this.$socket.unRegisterCallBack('trendData');		
		},
		methods: {			
			//初始化echart实例对象
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.trend_ref,this.$store.state.theme);
				//对图表初始化配置的控制
				const initOption = {
					legend:{
						left: 20,
						top: '14%',
						icon: 'circle'
					},
					tooltip: {
						trigger: 'axis'
					},
					grid: {
						left: '3%',
						top: '26%',
						right: '4%',
						bottom: '1%',
						containLabel: true
					},
					xAxis:{
            type: 'category',
						boundaryGap: false
					},
					yAxis:{
						type:'value'
					}
				};
				this.chartInstance.setOption(initOption);
			},
			//获取服务器数据
			getData(ret) {
					// this.$axios.get('trend').then(res => {
					// 	console.log(res.data);
					// this.resData = res.data;
					// 	this.updataChart();
					// })			
					//console.log(ret);
					this.resData = ret;					
					this.updataChart();
			},
			//更新图表
			updataChart() {
				// 半透明的颜色值
				const colorArr1 = [
				  'rgba(11, 168, 44, 0.2)',
				  'rgba(44, 110, 255, 0.2)',
				  'rgba(22, 242, 217, 0.2)',
				  'rgba(254, 33, 30, 0.2)',
				  'rgba(255, 242, 57, 0.2)'
				]
				// 全透明的颜色值
				const colorArr2 = [
				  'rgba(11, 168, 44, 0.0)',
				  'rgba(44, 110, 255, 0.0)',
				  'rgba(22, 242, 217, 0.0)',
				  'rgba(254, 33, 30, 0.0)',
				  'rgba(255, 242, 57, 0.0)'
				]
				//类目轴数据
      const timeArr = this.resData.common.month;
				console.log(timeArr)
				//y轴数据 series下数据
				const valueArr = this.resData[this.choiceType].data;
				const seriesArr =valueArr.map((item,index)=>{
					return {
						 name: item.name,
						 type: 'line',
						 data: item.data,
						 stack: this.choiceType,
						 // areaStyle:{}
						 areaStyle: {
							 
							 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
								 {
									 offset: 0,
									 color: colorArr1[index]
								 }, // %0的颜色值
								 {
									 offset: 1,
									 color: colorArr2[index]
								 } // 100%的颜色值
							 ])
						 }						 
					 }
				 })
				const dataOption = {
					xAxis: {
						data: timeArr
					},
					series: seriesArr
				}
				this.chartInstance.setOption(dataOption);
			},
			//echarts实例屏幕的适配
			screenAdapter(){
				//合适等分
				this.suitableWeight = this.$refs.trend_ref.offsetWidth / 100 ;
			  const adapterOption = {
					legend: {
						itemWidth: this.suitableWeight * 3,
						itemHeight: this.suitableWeight* 3,
						itemGap: this.suitableWeight* 3,
						textStyle: {
							fontSize: this.suitableWeight * 3
						}
					}
				};
				this.chartInstance.setOption(adapterOption);
			  this.chartInstance.resize();
			},
			handleSelect(currenType){
				this.choiceType = currenType;
				this.updataChart();
			}
		
		}
	}
</script>


<style  lang ='less' scoped>
.title {
	position: absolute;
	left: 15px;
	top: 15px;
	z-index: 100;
	color: #ffffff;
	font-weight: 700;
	.title-icon {
		margin-left: 10px;
		cursor:pointer ;
		/* font-size:10px; */
	}
	.select-con {
    /* background-color: #222733; */
	}
}
</style>
